<template>
	<view class="education-page" style="margin-top: 0;">
		<!-- 导航icon -->
		<view class="navbar-box center">
				<view class="nav-listbox one" bg-color="rgba(255,255,255,0)" v-for="(item, index) in navList" :key="index">
					<image :src="item.icon" mode="widthFix"></image>
					<view class="nav-text">{{ item.text }}</view>
				</view>
			
		</view>
		
		<!-- 师资团队 -->
		<view class="teach-item-box">
			<view class="item-title">师资团队</view>
			<view class="desc">我们的授课教师均具备5年以上教育经验，所教学生普遍有较大的成绩提升，并顺利进入理想学校</view>
			<view class="content  space-between">
					<view  class="item" v-for="(item, index) in teacherList" :key="index" @click="navTo(`./teacherDetails/teacherDetails?teacher=${JSON.stringify(item) }`)">
							<view class="teach-wrap">
								<view class="name">{{ item.teacher_name }}</view>
								<view class="teach-avatar"><image :src="item.avatar" mode="widthFix"></image></view>
							</view>
							<view class="teach-info">{{ item.desc }}</view> 
					</view>
			</view>
		</view>
		<!-- 招生办事处 -->
		<view class="office-box">
			<view class="item-title">招生办事处</view>
			<view class="office-content">
				<view class="office-item" v-for="(item,index) in officeList" :key="index" @click="navTo(`./school/school?address=${ JSON.stringify(item) }`)">
					<view class="avatar"><image  mode='widthFix':src="item.imgurl" ></image></view>
					<view class="address-name">
						<view class="name">{{ item.name }}</view>
						<view class="address">{{ item.address }}</view>
					</view>
					<view class="phone_icon"> <image src="../../static/education/phone.png" mode='widthFix'></image></view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
import api from '../../api/education.js'
export default {
	
	data() {
		return {
			// 导航图标
			navList: [
				{
					icon: '/static/education/teacher_icon.png',
					text: '师资雄厚'
				},
				{
					icon: '/static/education/teach-class_icon.png',
					text: '课程丰富'
				},
				{
					icon: '/static/education/class_live-icon.png',
					text: '信息化教育'
				},
				{
					icon: '/static/education/student-icon.png',
					text: '学员见证'
				}
			],
			// 教师简介图标
			teacherList: [],
			// 招生办事处
			officeList:[]
		};
	},
	onLoad() {
		this.getteacherList();
		this.getofficeList();
		
	},
	methods: {
		async getteacherList(){
			const { data } = await api.getteacherList()
			// console.log('老师：',data)
			this.teacherList= data
		},
		async getofficeList(){
			const { data } = await api.getofficeList()
			// console.log('地址：',data)
			this.officeList= data
		}
	}
};
</script>

<style lang="scss" scoped>
.education-page /deep/ .u-grid-item {
	background-color: transparent;
}
.education-page {
	padding: 20rpx;
	background: url('https://s1.ax1x.com/2020/07/31/aMTDot.jpg') no-repeat center center/cover;
	// 导航
	.navbar-box {

		padding: 20rpx;
		.nav-listbox{
			margin: 0 15rpx;
			image {
				margin: 0 20rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.nav-text {
				white-space: nowrap;
				color: #ffffff;
				margin-top: 20rpx;
			}
		}
		
	}
	// 师资团队
	.teach-item-box {
		margin-top: 40rpx;
		.desc {
			margin: 30rpx 0 120rpx;
			color: #ffffff;
			font-size: 24rpx;
		}
		.content {
			flex-wrap: wrap;
			.item {
				width: 48%;
				background-color: #ffffff;
				border-radius: 16rpx;
				margin: 5rpx;
				margin-bottom: 90rpx;
				height: 400rpx;
				.teach-wrap {
					position: relative;
					height: 120rpx;
					.name {
						position: absolute;
						text-align: right;
						left: 0;
						bottom: 0;
						width: 80%;
						background-color: #ffd83c;
						border-radius: 0 50rpx 50rpx 0;
						padding: 10rpx 20rpx;
					}
					.teach-avatar {
						position: absolute;
						bottom: -4px;
						left: 20rpx;
						width: 150rpx;
						image {
							width: 100%;
						}
					}
				}
				.teach-info {
					padding: 30rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					overflow: hidden;
				}
			}
		}
	}
	// 小班教育
	.small-class-box {
		.content {
			margin-top: 20rpx;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 10rpx;
			padding: 20rpx;
			padding-top: 30rpx;
			white-space: nowrap;
			overflow: hidden;
			.class-list {
				.class-item {
					&:nth-last-child(1){
						margin-right: 0;
					}
					width: 40%;
					display: inline-block;
					margin-right: 20rpx;
					image {
						width: 100%;
						height: 200rpx;
						border-radius: 6rpx;
					}
				}
			}
		}
	}
	,
	// 招生办事处
	.office-box {
		margin-top: 50rpx;
		.office-content {
			margin-top: 20rpx;
			background-color: #ffffff;
			padding: 0 20rpx;
			border-radius: 10rpx;
			.office-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #EEEEEE;
				.avatar {
					margin: 0 10rpx;
					image {
						width: 60px;
						height: 60px;
					}
				}
				.address-name{
					margin-left: 20rpx;
					flex: 2;
				}
			}
			.phone_icon image {
					width: 30px;
					height: 30px;
			}
			.name {
				margin-bottom: 20rpx;
			}
			.address {
				font-size: 24rpx;
				color: #888;
				margin-bottom: 10rpx;
			}
		}
	}
	// 咨询问答
	.questions-answers-box {
		margin-top: 50rpx;
		.questions-answers-content {
			margin-top: 20rpx;
			background-color:#ffffff;
			border-radius: 10rpx;
			padding: 20rpx;
			.item {
				padding: 20rpx 10rpx;
				border-bottom: 1rpx solid #eeeeee;
				.answers {
					color: #9b9b9b;
					font-size: 24rpx;
					margin-top: 10rpx;
					@include text-ellipsis-1;
				}
				.time {
					color: #9b9b9b;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	.item-title {
		
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		font-size: 20px;
		color: #FFFFFF;
		font-weight: 800;
	}
}
</style>
